import React, { Component } from 'react'

export default class App extends Component {
  a = 100;

  render() {
    return (
      <div>
        <input />
        {/* 写法一 */}
        <button onClick={() => {
          console.log("click", "如果内容逻辑过多，是不推荐这种写法的")
        }}>add1</button>
        {/* 写法二 */}
        <button onClick={this.handleClick}>add2</button>
        {/* 写法三 */}
        <button onClick={this.handleClick2}>add3</button>
        {/* 写法四 */}
        <button onClick={() => {
          // 匿名函数中写函数调用的方式
          this.handleClick3() // 比较推荐，执行匿名函数后调用方法
        }}>add3</button>
      </div>
    )
  }
  /* hanleClck要是加上小括号，会发现还没有开始点击就会执行，同时再次点击就不会继续执行；这是因为自己执行后由于没有return任何值，所以其实函数体内部是一个
  undefine，这样他肯定不会再执行了，所以react和Vue是不同的。
  */

  handleClick() {
    console.log("click2")
  }

  handleClick2 = () => {
    console.log("click2")
  }

  handleClick3 = () => {
    console.log("Click3")
  }
}
